<div id="user-profile">
    <h1><?php echo $user["User"]["name"]; ?></h1>
    <div id="nav">
        <ul>
            <li><a href="#" onclick="return load_profile();">Profile</a></li>
            <li><a href="#" onclick="return load_photos();">Photos</a></li>
            <li><a href="#" onclick="return load_wall();">Wall</a></li>
            <li><a href="#" onclick="return load_chat();">Chat</a></li>
        </ul>
    </div>
</div>
<div class="clear"></div>
<div id="user-content">
</div>
<div id="chatbox" style="display: none">
    <div id="chatuser"></div>
    <div id="chatmessage"></div>
    <input type="text" onkeypress="submitChat(event)" id="chatinput" />
</div>
<script type="text/javascript">
    var photos_page = 1;
    var chat_timer;
    load_profile();

    function check_chatbox() {
        if (to == -1) {
            document.getElementById('chatbox').style.display = 'none';
        } else {
            biji.load("<?php echo BASE_PATH; ?>/users/get_online/" + to, function(data) {
                if (data == 0) {
                    document.getElementById('chatbox').style.display = 'none';
                }
            });
        }
    }

    function check_chat() {
        biji.load("<?php echo BASE_PATH; ?>/users/chat_ajax/<?php echo $user["User"]["id"]; ?>", function(data) {
            biji.select("#user-content").innerHTML = data;
        });
        check_chatbox();
        chat_timer = window.setTimeout('check_chat()', 1000)
    }

    function load_chat() {
        biji.select("#user-content").fadeOut(200, function() {
            biji.select("#user-content").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';
            biji.select("#user-content").setOpacity(this, 100);

            biji.load("<?php echo BASE_PATH; ?>/users/chat_ajax/<?php echo $user["User"]["id"]; ?>", function(data) {
                biji.select("#user-content").innerHTML = data;
                biji.select("#user-content").fadeIn(200);
            });
        });
        check_chat();
        return false;
    }

    function load_profile() {
        document.getElementById('chatbox').style.display = 'none';
        window.clearTimeout(chat_timer);
        biji.select("#user-content").fadeOut(200, function() {
            biji.select("#user-content").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';
            biji.select("#user-content").setOpacity(this, 100);

            biji.load("<?php echo BASE_PATH; ?>/users/profile_ajax/<?php echo $user["User"]["id"]; ?>", function(data) {
                biji.select("#user-content").innerHTML = data;
                biji.select("#user-content").fadeIn(200);
            });
        });

        return false;
    }

    function load_photos() {
        document.getElementById('chatbox').style.display = 'none';
        window.clearTimeout(chat_timer);
        biji.select("#user-content").fadeOut(200, function() {
            biji.load("<?php echo BASE_PATH; ?>/users/photos_ajax/<?php echo $user["User"]["id"]; ?>", function(data) {
                if (data != '') {
                    biji.select("#user-content").innerHTML = data;
                } else {
                    biji.select("#user-content").innerHTML = "No photo";
                }
                biji.select("#user-content").fadeIn(200);
                load_user_photos();
            });
        });
        
        return false;
    }

    function load_wall() {
        document.getElementById('chatbox').style.display = 'none';
        window.clearTimeout(chat_timer);
        biji.select("#user-content").fadeOut(200, function() {
            biji.select("#user-content").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';
            biji.select("#user-content").setOpacity(this, 100);

            biji.load("<?php echo BASE_PATH; ?>/users/wall_ajax/<?php echo $user["User"]["id"]; ?>", function(data) {
                if (data != '') {
                    biji.select("#user-content").innerHTML = data;
                } else {
                    biji.select("#user-content").innerHTML = "No wall";
                }
                biji.select("#user-content").fadeIn(200);
                load_user_wall();
            });
        });

        return false;
    }

    function load_user_photos() {
        photos_page = 1;

        biji.select("#user-photos-thumbnails").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';

        biji.load("<?php echo BASE_PATH; ?>/users/user_photos_ajax/<?php echo $user["User"]["id"]; ?>/" + photos_page, function(data) {
            if (data != '') {
                biji.select("#loadmore").style.display = 'inline';
                biji.select("#user-photos-thumbnails").innerHTML = data;
            } else {
                biji.select("#user-content").innerHTML = "No photo";
            }
        });
    }

    function load_more_user_photos() {
        ++photos_page;

        biji.select("#loadmore-message").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';

        biji.load("<?php echo BASE_PATH; ?>/users/user_photos_ajax/<?php echo $user["User"]["id"]; ?>/" + photos_page, function(data) {
            if (data == '') {
                biji.select("#loadmore").style.display = 'none';
            } else {
                biji.select("#loadmore").style.display = 'inline';
                biji.select("#user-photos-thumbnails").innerHTML += data;
            }

            biji.select("#loadmore-message").innerHTML = 'Load more';
        });
    }

    function load_user_wall() {
        wall_page = 1;

        

        biji.load("<?php echo BASE_PATH; ?>/users/user_wall_ajax/<?php echo $user["User"]["id"]; ?>/" + wall_page, function(data) {
            if (data != '') {
                biji.select("#loadmore").style.display = 'inline';
                biji.select("#wall").innerHTML = data;
            } 
        });
    }

    function load_more_user_wall() {
        ++wall_page;

        biji.select("#loadmore-message").innerHTML = '<img src="<?php echo BASE_PATH; ?>/img/loading.gif" alt="" />';

        biji.load("<?php echo BASE_PATH; ?>/users/user_wall_ajax/<?php echo $user["User"]["id"]; ?>/" + wall_page, function(data) {
            if (data == '') {
                biji.select("#loadmore").style.display = 'none';
            } else {
                biji.select("#loadmore").style.display = 'inline';
                biji.select("#wall").innerHTML += data;
            }

            biji.select("#loadmore-message").innerHTML = 'Load more';
        });
    }

    function delete_wall(user_id, post_id) {
        biji.load("<?php echo BASE_PATH; ?>/users/wall/delete/" + user_id + "/" + post_id, function(data) {
            load_user_wall();
        });
    }

    function delete_wall_comment(user_id, comment_id) {
        biji.load("<?php echo BASE_PATH; ?>/users/wall/delete_comment/" + user_id + "/" + comment_id, function(data) {
            load_user_wall();
        });
    }

    function send_wall(form) {
        if (validate_add_wall(form)) {
            add_wall("<?php echo $user["User"]["id"]; ?>");
        }

        return false;
    }

    function add_wall(user_id) {
        var author_user_id = biji.select("#author_user_id").value;
        var content_add_wall = biji.select("#content_add_wall").value;

        biji.load("<?php echo BASE_PATH; ?>/users/wall/add/" + user_id + "?author_user_id=" + author_user_id + "&content_add_wall=" + escape(content_add_wall), function() {
            load_user_wall();
            biji.select("#content_add_wall").value = '';
        }, "post");
    }

    function send_wall_comment(form, post_id) {
        if (validate_add_wall_comment(form)) {
            var comment = form.content_add_wall_comment.value;
            
            add_wall_comment("<?php echo $user["User"]["id"]; ?>", post_id, comment);
        }

        return false;
    }

    function add_wall_comment(user_id, post_id, comment) {
        var author_user_id = biji.select("#author_user_id").value;
        
        biji.load("<?php echo BASE_PATH; ?>/users/wall/add_comment/" + user_id + "/" + post_id + "?author_user_id=" + author_user_id + "&content_add_wall_comment=" + escape(comment), function() {
            load_user_wall();
            biji.select("#content_add_wall_comment").value = '';
        }, "post");
    }

    var timer;
    var to = -1;

    function showChat(user) {
        if (document.getElementById('chatbox').style.display == 'none') {
            document.getElementById('chatbox').style.display = 'inline';
            to = user;
            ajax_user(user);
            ajax_chat();
        } else {
            window.clearTimeout(timer);
            document.getElementById('chatbox').style.display = 'none';
        }
    }

    function ajax_chat() {
        biji.load("<?php echo BASE_PATH; ?>/users/get_chat/" + to, function(data) {
            if(data != '') {
                biji.select("#chatmessage").innerHTML = data;
            } else {
                biji.select("#chatmessage").innerHTML = '';
            }
        });
        timer = window.setTimeout('ajax_chat()', 1000);
    }

    function ajax_user(user) {
        biji.load("<?php echo BASE_PATH; ?>/users/get_user/" + user, function(data) {
            if(data != '') {
                document.getElementById('chatuser').innerHTML = data;
            } 
        });
    }

    function submitChat(e) {
        content = document.getElementById('chatinput').value;
        if ((e.keyCode == 13) && (content != '')) {
            biji.load("<?php echo BASE_PATH; ?>/users/submit_chat/" + to + "/" + content, function() {
                document.getElementById('chatinput').value = '';
            });
        }
    }
</script>